.md-whiteframe-1dp.bid4freeWorkspaceContainer(layout="column", flex)
	md-toolbar
		.md-toolbar-tools
			h2
				span {{vm.title}}
			span(flex)
				md-button.md-icon-button(ng-click="vm.init()", aria-label="Init")
			md-button.md-icon-button(ng-click="vm.goToMainPage()", aria-label="Go Back")
				md-icon(class="fa fa-mail-reply")

	md-content(flex, layout="row")
		div(flex="50", layout="row", layout-align="start start")
			md-tabs(md-border-bottom, flex="90", md-selected="vm.selectedTab", layout="column")
				// Terms & Conditions
				md-tab(label="Terms & Conditions")
					md-content.md-padding
						// Add new section
						.sectionInput(layout="column")
							div(layout="row", layout-align="space-between")
								md-input-container.md-block(flex="40", md-no-float)
									input(ng-model="vm.sectionTitle", placeholder="Section Title")
								.sectionInputRadioGroup(layout="row", flex="60", layout-align="end center")
									| Type:
									span(flex="5")
									md-radio-group(ng-model="vm.sectionType")
										md-radio-button(value="keyvalue") Name/Description
										md-radio-button(value="table") Table

							// Table Titles input
							.tableTitlesInput(ng-if="vm.showTableTitlesInput", layout="row", flex, layout-align="space-between center")
								md-input-container.md-block(flex="30", md-no-float)
									input(ng-model="vm.tableColumn1Title", placeholder="Column 1 Title")
								md-input-container.md-block(flex="25", md-no-float)
									input(ng-model="vm.tableColumn2Title", placeholder="Column 2 Title")
								md-input-container.md-block(flex="25", md-no-float)
									input(ng-model="vm.tableColumn3Title", placeholder="Column 3 Title")

							// Add section
							.saveSection(layout="row", layout-align="start center")
								md-button.md-accent(ng-disabled="!vm.sectionTitle", ng-click="vm.addSection()") Add Section

						// Show sections
						.sections(layout="column", flex)
							//div(style="background:red", flex)
							div.md-padding.section(ng-repeat="section in vm.sections")
								div(layout="column")
									// Section title
									.itemInput(layout="row", layout-align="start center")
										label {{section.block}}
									// Table titles
									.tableTitles(ng-if="section.type==='table'", layout="row", flex, layout-align="space-between center")
										label(flex="25") {{section.items[0].keys[0].name}}
										label(flex="25") {{section.items[0].keys[1].name}}
										label(flex="25") {{section.items[0].keys[2].name}}
										span(flex="10")

								// Show items
								// Key/Value
								div(ng-if="section.type==='keyvalue'")
									md-content.items(ng-repeat="item in vm.sections[$index].items track by $index", layout="row", layout-align="space-between center")
										label(flex="30") {{item.keys[0].name}}
										//label(flex) {{item.values[0]}}
										md-input-container.md-block.keyvalueValue(flex="65")
											label
											input(ng-model="item.values[0]", name="Value")

								// Table
								div(ng-if="section.type==='table'")
									md-content.items(ng-repeat="values in vm.sections[$index].items[0].values track by $index", layout="row", layout-align="space-between center")
										label(flex="25") {{values[0]}}
										label(flex="25") {{values[1]}}
										label(flex="25") {{values[2]}}
										span(flex="10")

								// Add new item
								.addNewItem(layout="column", flex)
									div(layout="row", layout-align="start center")
										md-button.md-icon-button.md-accent(ng-click="vm.toggleItemInput($index)", aria-label="Toggle Item Input")
											md-icon(class="fa fa-plus")
									div(ng-if="section.showInput")
										// Key/Value
										div(ng-if="section.type==='keyvalue'", layout="row", flex, layout-align="start center")
											md-input-container.md-block(flex="50")
												label Name
												input(ng-model="section.newItemName", name="Item Name")
											//md-input-container.md-block(flex="80")
												label Description
												input(ng-model="section.newItemDescription", name="Item Description")
											div(flex="10")
												md-button.md-accent(ng-click="vm.addItem($index)") Add
										// Table
										div(ng-if="section.type==='table'", layout="row", flex, layout-align="space-between center")
											md-input-container.md-block(flex="25")
												label {{section.items[0].keys[0].name}}
												input(ng-model="section.column1", name="Column 1")
											md-input-container.md-block(flex="25")
												label {{section.items[0].keys[1].name}}
												input(ng-model="section.column2", name="Column 2")
											md-input-container.md-block(flex="25")
												label {{section.items[0].keys[2].name}}
												input(ng-model="section.column3", name="Column 3")
											div(flex="10")
												md-button.md-accent(ng-click="vm.addItem($index)") Add


				// Bill of Quantities
				md-tab(label="Bill of Quantities")
					md-content.md-padding
						//Total
						.boqTotal(layout="row", flex)
							h3(flex="20") Total
							h3 {{vm.boqTotal}}

						// List of items
						md-list.boqList
							md-list-item.md-1-line.boqListTitles
								p(flex="50") Type
								p(flex="15", layout="row", layout-align="center center") Code
								p(flex="15", layout="row", layout-align="center center") Qty
								p(flex="10", layout="row", layout-align="center center") Rate
								p(flex="10", layout="row", layout-align="center center") Price
							md-list-item.md-1-line(ng-repeat="item in vm.boq")
								p(flex="50") {{item.type}}
								p(flex="15", layout="row", layout-align="center center") {{item.code}}
								p(flex="15", layout="row", layout-align="center center") {{item.quantity}}
								div(flex="10", layout="row", layout-align="center center")
									md-input-container.boqListInput
										input(
											ng-model="item.rate"
											name="Rate"
											aria-label="Rate"
											ng-change="vm.boqRateChange($index)"
											type="number"
											max="999999"
											min="0")
								p(flex="10", layout="row", layout-align="center center") {{item.price}}

				// Scope of Works
				md-tab(label="Scope of Works")
					md-content.md-padding
				// Other
				md-tab(label="Other")
					md-content.md-padding


			span.saveContainer(flex, layout="column", layout-align="start center")
				md-button.md-icon-button.md-accent(ng-click="vm.save()", aria-label="Save")
					md-icon(class="fa fa-floppy-o")
				label.md-accent.md-hue-2(ng-if="vm.showSaveConfirmation") Saved

		md-content(flex="50")
			viewermanager
